<template>
  <div>
    <el-container>
      <el-header style="height:100%;width:100%">
        <div class="searchStyle">
          <div class="firstSytle">
            <el-input size="mini" v-model="gridJson.searchUserName"   class="inputStyle" placeholder="请输入用户名"></el-input>
            <el-input size="mini" v-model="gridJson.searchName"   class="inputStyle" placeholder="请输入姓名"></el-input>
            <el-input size="mini" v-model="gridJson.searchNumber"   style="width: 130px" placeholder="请输入学号/工号"></el-input>
            <el-input size="mini" v-model="gridJson.searchSex" class="inputStyle" placeholder="请输人性别"></el-input>
            <el-input size="mini" v-model="gridJson.searchBuildId"   class="inputStyle" placeholder="请输入公寓编号"></el-input>
            <el-input size="mini" v-model="gridJson.searchRoomId"   class="inputStyle" placeholder="请输入宿舍号"></el-input>
            <el-input size="mini" v-model="gridJson.searchDepart"   class="inputStyle" placeholder="请入所在系"></el-input>
            <el-input size="mini" v-model="gridJson.searchSpecial"   style="width: 130px" placeholder="请输入所在专业"></el-input>
            <el-button size="mini" type="primary" @click="searchAll">查询</el-button>
            <el-button size="mini" type="primary" @click="emptyInput">重置</el-button>
          </div>
          <div class="secondStyle">
            <div>
              <el-button size="mini" type="success" @click="loadUser" icon="el-icon-refresh">刷新</el-button>
              <el-button size="mini" type="primary" @click="addBtn" icon="el-icon-circle-plus-outline">添加</el-button>
              <el-button size="mini" type="danger" @click="deleteBatch" icon="el-icon-delete">批量删除</el-button>
            </div>
            <div>
              <el-button size="mini" type="success" @click="exportUser" icon="el-icon-upload2">导出数据</el-button>
            </div>
          </div>
        </div>
      </el-header>
      <el-main style="padding-left: 1px;padding-top: 20px">
        <div>
          <el-table :data="users" stripe v-loading="tableLoading" size="mini" style="width: 100%"  @selection-change="selectDel" >
            <el-table-column type="selection" width="30"></el-table-column>
            <el-table-column prop="listId" label="序号" width="60"></el-table-column>
            <el-table-column prop="uname" label="用户名" width="100"></el-table-column>
            <el-table-column prop="name" label="姓名" width="100"></el-table-column>
            <el-table-column prop="sex" label="性别" width="60"></el-table-column>
            <el-table-column prop="age" label="年龄" width="60"></el-table-column>
            <el-table-column prop="number" label="学号/工号" width="120"></el-table-column>
            <el-table-column prop="buildId" label="公寓编号" width="120"></el-table-column>
            <el-table-column prop="roomId" label="宿舍号" width="100"></el-table-column>
            <el-table-column prop="depart" label="系别" width="160"></el-table-column>
            <el-table-column prop="special" label="专业" width="180"></el-table-column>
            <el-table-column prop="tel" label="联系电话" width="130"></el-table-column>
            <el-table-column prop="registerTime" label="注册时间" width="145px"></el-table-column>
            <el-table-column label="操作" align="center" width="195px"> 
              <template slot-scope="scope">
                <el-button type="primary" icon="el-icon-edit" size="mini" @click="details(scope.row)"></el-button>
                <el-button type="danger" icon="el-icon-delete" size="mini" @click="deleteId(scope.row)"></el-button>
              </template>
            </el-table-column>
          </el-table>
          <div class="lastLine">               
            <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
                           :current-page.sync="pageNum" :page-sizes="[10, 20,30,50,100,200]"
                           :page-size="pageSize"
                           layout="sizes, prev, pager, next" :total="total">      
            </el-pagination>
          </div>
        </div>
      </el-main>

    </el-container>
    <!--修改 -->
    <el-dialog width="30%" title="详情" :visible.sync="click8">
      <el-form :model="user"  label-width="120px" class="formStyle">       
        <el-form-item label="用户名：" prop="uname">
          <el-input size="mini" v-model="user.uname"></el-input>
        </el-form-item>
        <el-form-item label="姓名：" prop="name">
          <el-input size="mini" v-model="user.name"></el-input>
        </el-form-item>
        <el-form-item label="性别：" prop="sex">
          <el-select size="mini" v-model="user.sex">
            <el-option
              v-for="item in selectSex" :key="item.value" :label="item.label" :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="年龄：" prop="age">
          <el-input size="mini" v-model="user.age"></el-input>
        </el-form-item>
        <el-form-item label="学号/工号：" prop="number">
          <el-input size="mini" v-model="user.number"></el-input>
        </el-form-item>
        <el-form-item label="公寓编号：" prop="buildId">
          <el-select size="mini" v-model="user.buildId" @change="handleBuild">
            <el-option
              v-for="item in selectBulid" :key="item.value" :label="item.label" :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="宿舍号：" prop="roomId">
          <el-select size="mini" v-model="user.roomId" @change="handleRoom">
            <el-option
              v-for="item in selectRoom" :key="item.value" :label="item.label" :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="系别：" prop="depart">
          <el-select size="mini" v-model="user.depart" @change="handleDepart">
            <el-option
              v-for="item in selcetDepart" :key="item.value" :label="item.label" :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="专业：" prop="special">
          <el-select size="mini" v-model="user.special" @change="handleSpecial">
            <el-option
              v-for="item in selectSpecial" :key="item.value" :label="item.label" :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="联系电话：" prop="tel">
          <el-input size="mini" v-model="user.tel"></el-input>
        </el-form-item>
        <el-form-item label="注册时间：" prop="registerTime">{{user.registerTime}}
          <!-- <el-input size="mini" disabled="true" v-model="user.registerTime"></el-input> -->
        </el-form-item>
      </el-form>
         
      <div slot="footer">            
        <el-button type="primary" size="mini" @click="click8= false">取 消</el-button>
        <el-button type="primary" size="mini"  @click="save">保 存</el-button>
      </div>
    </el-dialog>
<!-- 添加 -->
    <el-dialog width="30%" title="添加" :visible.sync="clickAdd">
      <el-form :model="addFrom"  label-width="130px" class="formStyle" :rules="rules" ref="addFrom">       
        <el-form-item label="用户名：" prop="uname">
          <el-input size="mini" v-model="addFrom.uname"></el-input>
        </el-form-item>
        <el-form-item label="姓名：" prop="name">
          <el-input size="mini" v-model="addFrom.name"></el-input>
        </el-form-item>
        <el-form-item label="性别：" prop="sex">
          <el-select size="mini" v-model="addFrom.sex">
            <el-option
              v-for="item in selectSex" :key="item.value" :label="item.label" :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="联系电话：" prop="tel">
          <el-input size="mini" v-model="addFrom.tel"></el-input>
        </el-form-item>
      </el-form>
            
      <div slot="footer">            
        <el-button type="primary" size="mini" @click="clickAdd= false">取 消</el-button>
        <el-button type="primary" size="mini"  @click="add('addFrom')">保存</el-button>
      </div>
    </el-dialog>
  </div>

</template>

<script>
    import {Message} from 'element-ui'
    import {getRequest, postMethod, postRequest, putRequest} from "../../utils/api";

    export default {
        data() {
            var checkPhone = (rule, value, callback) => {
                if (!value) {
                    return callback(new Error('手机号不能为空'));
                }
                setTimeout(() => {

                    if (value.toString().length != 11) {
                        callback(new Error('请输入11位手机号'));
                    } else {
                        this.addFrom.tel = value
                        callback()

                        // this.add()
                    }

                }, 100);
            };
            return {
                gridJson: {
                    searchSpecial: '',
                    searchDepart: '',
                    searchBuildId: '',
                    searchRoomId: '',
                    searchSex: '',
                    searchNumber: '',
                    searchUserName: '',
                    searchName: '',//查询
                },
                requestObj: {
                    orderConditions: [],
                    pageNum: 1, //当前页数
                    pageSize: 10, //每页条数
                    whereConditions: [],
                },
                tableLoading: false,
                index: 0,
                users: [],
                multipleSelection: [],
                click8: false,
                tempDepartId:'',
                tempSpecialId:'',
                tempRoomId:'',
                tempBuildId:'',
                selectSex: [
                    {
                        label: '男',
                        value: 1,
                    },
                    {
                        label: '女',
                        value: 0,
                    }
                ],
                selcetDepart: [  //系别
                    {
                        label: '',
                        value: '',
                    }
                ],
                selectSpecial: [   //专业
                    {
                        label: '',
                        value: '',
                    }
                ],
                selectRoom: [  //宿舍
                    {
                        label: '',
                        value: '',
                    }
                ],
                selectBulid: [  //楼号
                    {
                        label: '',
                        value: '',
                    }
                ],
                user: {
                    id: '',
                    uname: '',
                    name: '',
                    sex: '',
                    age: '',
                    number: '',
                    buildId: '',
                    roomId: '',
                    depart: '',
                    special: '',
                    tel: '',
                    registerTime: '',
                },
                clickAdd: false,
                addFrom: {
                    uname: '',
                    name: '',
                    sex: '',
                    tel: '',
                },
                pageNum: 1,
                pageSize: 10,
                total: 0,
                list: [],
                tableId:[],
                rules: {
                    uname: [
                        {required: true, message: '请输入用户名', trigger: 'blur'}
                    ],
                    name: [
                        {required: true, message: '请输入姓名', trigger: 'blur'}
                    ],
                    sex: [
                        {required: true, message: '请选择性别', trigger: 'blur'}
                    ],
                    tel: [
                        {required: true, validator: checkPhone, trigger: 'blur'}
                    ]
                },


            };

        },

        methods: {
            loadUser: function () {  //获取用户数据
                this.tableLoading = true;
                this.getRequest("/user/list?pageSize=" + this.pageSize + "&pageNum=" + this.pageNum).then(resp => {
                    this.tableLoading = false;
                    if (resp && resp.status == 200) {
                        this.total = resp.data.obj.total
                        this.users = resp.data.obj.data;
                        for (var i = 0; i < this.users.length; i++) {
                            let b, tempdate;
                            b = i + 1
                            this.users[i].listId = b
                            tempdate = this.users[i].registerTime
                            this.users[i].registerTime = tempdate.slice(0, tempdate.indexOf("."))
                            switch (this.users[i].sex) {
                                case 0:
                                    this.users[i].sex = '女';
                                    break;
                                case 1:
                                    this.users[i].sex = '男';
                                    break;
                            }
                        }
                    }
                })
            },
            deleteId(row) {  //删除
                if (confirm('是否删除')) {
                    this.tableLoading = true;
                    var _this = this;
                    this.deleteRequest("/user/delById/" + row.id).then(resp => {
                        _this.tableLoading = false;
                        if (resp && resp.status == 200) {
                            this.loadUser();
                            Message.success({message: data.data.msg});
                        }
                    })
                }
            },
            searchAll() {  //查找
                this.initDataParms();
                this.tableLoading = true;
                postMethod("/user/findByKeyWords", this.requestObj).then(resp => {
                    this.tableLoading = false;
                    if (resp && resp.status == 200) {
                        this.total = resp.data.data.total
                        this.users = resp.data.data.data;
                        for (var i = 0; i < this.users.length; i++) {
                            let b;
                            b = i + 1
                            this.users[i].listId = b
                            switch (this.users[i].sex) {
                                case 0:
                                    this.users[i].sex = '女';
                                    break;
                                case 1:
                                    this.users[i].sex = '男';
                                    break;
                            }
                        }

                    }
                })

            },
            exportUser() {  //导出数据
                window.open('/user/export', '_parent');
            },
            save() {  //编辑
                this.tableLoading = false;
                if(this.tempDepartId!=""){
                  this.tempDepartId = this.user.depart
                  this.user.depart = this.getSelectLabel(this.selcetDepart, this.tempDepartId)
                }
                if(this.tempSpecialId!=""){
                  this.tempSpecialId = this.user.special
                  this.user.special = this.getSelectLabel(this.selectSpecial, this.tempSpecialId)
                }
                if(this.tempRoomId!=""){
                 this.tempRoomId = this.user.roomId
                  this.user.roomId = this.getSelectLabel(this.selectRoom, this.tempRoomId)
                }
                if(this.tempBuildId!=""){
                  this.tempBuildId = this.user.buildId
                  // this.user.buildId = this.getSelectLabel(this.selectBulid, this.tempBuildId)
                }
                postMethod("/user/updateUser", this.user).then(resp => {
                    if (resp && resp.status == 200) {
                        this.click8 = false
                        this.tempDepartId="",
                        this.tempSpecialId="",
                        this.tempRoomId="",
                        this.tempBuildId="",
                        this.loadUser();
                        Message.success({message:resp.data.msg});


                    }
                })
            },
            add(formName) { //添加
                this.$refs[formName].validate((valid) => {
                    if (valid) {
                        postMethod("/user/createUser", this.addFrom).then(resp => {
                            if (resp && resp.status == 200) {
                                this.clickAdd= false
                                this.loadUser();
                                Message.success({message: data.data.msg});

                            }
                        })
                    } else {
                        return false;
                        this.addFrom = {}
                    }
                })
            },
            deleteBatch() {   //批量删除
              if(this.tableId.length===0){
                    this.$message.error('请选择要删除的项目');
                    return false;
                }
                this.deleteRequest("/user/deleteBatchd/" + this.tableId).then(resp => {
                      this.tableLoading = false;
                      if (resp && resp.status == 200) {
                          this.loadUser();
                      }
                  })

            },
            details(row) {   //详情
              this.getRequest("/user/findById/" + row.id).then(resp => {
                  this.tableLoading = false;
                  if (resp && resp.status == 200) {
                      this.user = resp.data.obj
                      this.click8 = true
                  }
              })
            },

            addBtn() {
                this.clickAdd = true
            },
            handleSizeChange(val) {    //分页
                this.pageSize = val

                this.loadUser()
            },
            handleCurrentChange(val) {   //分页
                this.pageNum = val

                this.loadUser()
            },
            emptyInput() { //重置
                this.gridJson.searchName = '';
                this.gridJson.searchSpecial = '';
                this.gridJson.searchDepart = '';
                this.gridJson.searchRoomId = '';
                this.gridJson.searchNumber = '';
                this.gridJson.searchUserName = '';
                this.gridJson.searchSex = '';
                this.gridJson.searchBuildId = '';
                this.loadUser();
            },
            initDataParms() {
                this.getSort();
                this.requestObj.whereConditions = [];
                if (this.gridJson.searchUserName !== '') {
                    this.requestObj.whereConditions.push({
                        field: "uname",
                        method: 'Like',
                        value: this.gridJson.searchUserName
                    })
                }
                if (this.gridJson.searchName !== '') {
                    this.requestObj.whereConditions.push({
                        field: "name",
                        method: 'Like',
                        value: this.gridJson.searchName
                    })
                }
                if (this.gridJson.searchNumber !== '') {
                    this.requestObj.whereConditions.push({
                        field: "number",
                        method: 'Like',
                        value: this.gridJson.searchNumber
                    })
                }
                if (this.gridJson.searchSex !== '') {
                    this.requestObj.whereConditions.push({
                        field: "sex",
                        method: 'Equal',
                        value: this.gridJson.searchSex === '男' ? 1 : 0
                    })
                }
                if (this.gridJson.searchBuildId !== '') {
                    this.requestObj.whereConditions.push({
                        field: "buildId",
                        method: 'Equal',
                        value: this.gridJson.searchBuildId
                    })
                }
                if (this.gridJson.searchRoomId !== '') {
                    this.requestObj.whereConditions.push({
                        field: "roomId",
                        method: 'Equal',
                        value: this.gridJson.searchRoomId
                    })
                }
                if (this.gridJson.searchDepart !== '') {
                    this.requestObj.whereConditions.push({
                        field: "depart",
                        method: 'Like',
                        value: this.gridJson.searchDepart
                    })
                }
                if (this.gridJson.searchSpecial !== '') {
                    this.requestObj.whereConditions.push({
                        field: "special",
                        method: 'Like',
                        value: this.gridJson.searchSpecial
                    })
                }
            },
            getSort() {
                this.requestObj.orderConditions.push({
                    field: 'id',
                    method: 'ASC',
                });
                this.requestObj.orderConditions.push({
                    field: 'registerTime',
                    method: 'DESC',
                });
            },
            handleSpecial(row){
              this.tempSpecialId=row
            },
            handleRoom(row){
              this.tempRoomId=row
            },
            handleBuild(row){
              this.tempBuildId=row
            },
            handleDepart(row) {  //系别点击,跳出对应专业
                this.tempDepartId=row
                var selectDepartId
                selectDepartId = row
                this.getRequest("/config/special/" + selectDepartId).then(resp => {
                    this.tableLoading = false;
                    if (resp && resp.status == 200) {
                        var tempList = []
                        tempList = resp.data.obj
                        for (var i = 0; i < tempList.length; i++) {
                            this.selectSpecial = tempList
                            this.selectSpecial[i].label = tempList[i].specialName
                            this.selectSpecial[i].value = tempList[i].specialId
                        }
                    }
                })
            },
            getDepart() {    //获取系别列表
                this.getRequest("/config/depart").then(resp => {
                    this.tableLoading = false;
                    if (resp && resp.status == 200) {
                        var tempList = []
                        tempList = resp.data.obj
                        for (var i = 0; i < tempList.length; i++) {
                            this.selcetDepart = tempList
                            this.selcetDepart[i].label = tempList[i].departName
                            this.selcetDepart[i].value = tempList[i].departId
                        }
                    }
                })
            },
            getRoom() {    //获取宿舍号
                this.getRequest("/config/room").then(resp => {
                    this.tableLoading = false;
                    if (resp && resp.status == 200) {
                        var tempList = []
                        tempList = resp.data.obj
                        for (var i = 0; i < tempList.length; i++) {
                            this.selectRoom = tempList
                            this.selectRoom[i].label = tempList[i].roomId
                            this.selectRoom[i].value = tempList[i].roomId
                        }
                    }
                })
            },
            getBulid() {   //获取楼号
                this.getRequest("/config/build").then(resp => {
                    this.tableLoading = false;
                    if (resp && resp.status == 200) {
                        var tempList = []
                        tempList = resp.data.obj
                        for (var i = 0; i < tempList.length; i++) {
                            this.selectBulid = tempList
                            this.selectBulid[i].label = tempList[i].label
                            this.selectBulid[i].value = tempList[i].buildId
                        }
                    }
                })
            },
            getSelectLabel(selectList, tempListId) {
                for (var i = 0; i < selectList.length; i++) {
                    if (tempListId == selectList[i].value) {
                        return selectList[i].label
                    }
                }
            },
            selectDel(row){     //表格的选择
              // var _this =this
              if(row.length!=0){
                // this.tableId=row
                for(var i=0;i<row.length;i++){
                  //这是直接传ID的————500
                  this.tableId[i]=row[i].id
                  //下面四行是带ids对象的————400，错误请求
                  // if(this.tableId.length<row.length){
                  //   this.tableId[i]={ids:''}
                  //   this.tableId[i].ids=row[i].id
                  //   }
                  }
                  this.tableId= this.tableId.slice(0,row.length)
                }else if(row.length == 0){
                    this.tableId=row
                }
            },

        },
        mounted: function () {
            this.loadUser();//加载列表
            this.getDepart(); //获取系别列表
            this.getRoom();//获取宿舍号
            this.getBulid();//获取楼号
        },

    }


</script>
<style>
  .searchStyle {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
  }

  .firstSytle {
    margin-top: 10px;
    width: 100%;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
  }

  .inputStyle {
    width: 120px;
  }

  .secondStyle {
    margin-top: 10px;
    width: 100%;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
  }

  .lastLine {
    display: flex;
    flex-direction: row;
    justify-content: flex-end;
    margin:  10px 0 10px 0;
  }

  .el-row {
    margin: 10px 0;
  }

  .el-table {
    text-align: left;
    size: auto;
    width: 150px;
  }

  .formStyle {
    width: 300px;
    text-align: left;
  }
</style>


